<template>
  <div class="st">
    <div id="st1"></div>
    <div id="st2"></div>
    <div id="st3"></div>
    <div id="st4"></div>
    <div id="st5"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let mycharts = this.$charts.init(document.querySelector("#st1"));
    let mycharts2 = this.$charts.init(document.querySelector("#st2"));
    let mycharts3 = this.$charts.init(document.querySelector("#st3"));
    let mycharts4 = this.$charts.init(document.querySelector("#st4"));
    let mycharts5 = this.$charts.init(document.querySelector("#st5"));
    mycharts.setOption({
      title: {
        text: "第一个表"
      },
      tooltip: {}, //提示
      xAxis: {
        data: ["第一个", "第二个", "第三个", "第四个", "第五个", "第六个"] //下面的数据
      },
      yAxis: {},
      series: [
        {
          name: "点击量",
          type: "bar", //柱状
          data: [8, 9, 87, 4, 5, 6] //柱状图数据
        }
      ]
    });
    mycharts2.setOption({
      title: {
        text: "第二个表"
      },
      tooltip: {},
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {},
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line" //点线
        }
      ]
    });
    mycharts3.setOption({
      title: {
        text: "Funnel"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}%"
      },
      toolbox: {
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      legend: {
        data: ["Show", "Click", "Visit", "Inquiry", "Order"]
      },
      series: [
        {
          name: "Expected",
          type: "funnel",
          left: "10%",
          width: "80%",
          label: {
            formatter: "{b}Expected"
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            opacity: 0.7
          },
          emphasis: {
            label: {
              position: "inside",
              formatter: "{b}Expected: {c}%"
            }
          },
          data: [
            { value: 60, name: "Visit" },
            { value: 40, name: "Inquiry" },
            { value: 20, name: "Order" },
            { value: 80, name: "Click" },
            { value: 100, name: "Show" }
          ]
        },
        {
          name: "Actual",
          type: "funnel",
          left: "10%",
          width: "80%",
          maxSize: "80%",
          label: {
            position: "inside",
            formatter: "{c}%",
            color: "#fff"
          },
          itemStyle: {
            opacity: 0.5,
            borderColor: "#fff",
            borderWidth: 2
          },
          emphasis: {
            label: {
              position: "inside",
              formatter: "{b}Actual: {c}%"
            }
          },
          data: [
            { value: 30, name: "Visit" },
            { value: 10, name: "Inquiry" },
            { value: 5, name: "Order" },
            { value: 50, name: "Click" },
            { value: 80, name: "Show" }
          ],
          // Ensure outer shape will not be over inner shape when hover.
          z: 100
        }
      ]
    });
    mycharts4.setOption({
      tooltip: {
        trigger: "item"
      },
      legend: {
        top: "5%",
        left: "center"
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2
          },
          label: {
            show: false,
            position: "center"
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold"
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: "实到" },
            { value: 735, name: "应到" },
            { value: 580, name: "请假" },
            { value: 484, name: "旷课" },
            { value: 300, name: "开出" }
          ]
        }
      ]
    });
    mycharts5.setOption(
      {
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            splitNumber: 12,
            itemStyle: {
              color: "#FFAB91"
            },
            progress: {
              show: true,
              width: 30
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 30
              }
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#999"
              }
            },
            splitLine: {
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: "#999"
              }
            },
            axisLabel: {
              distance: -20,
              color: "#999",
              fontSize: 20
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 60,
              fontWeight: "bolder",
              formatter: "{value} °C",
              color: "auto"
            },
            data: [
              {
                value: 38.6
              }
            ]
          },
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            itemStyle: {
              color: "#FD7347"
            },
            progress: {
              show: true,
              width: 8
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 42
              }
            ]
          }
        ]
      },
      setInterval(function() {
        const random = +(Math.random() * 60).toFixed(2);
        mycharts5.setOption({
          series: [
            {
              data: [
                {
                  value: random
                }
              ]
            },
            {
              data: [
                {
                  value: random
                }
              ]
            }
          ]
        });
      }, 5000)
    );
  }
};
</script>

<style>
.st {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#st2,
#st1,
#st3,
#st4 {
  width: 500px;
  height: 500px;
  background-color: #ffffff;
  border-radius: 10px;
}
#st4 {
  margin-top: 30px;
}
#st5 {
  margin-top: 30px;
  width: 800px;
  height: 500px;
  background-color: #ffffff;
}
</style>